<html>
<head>
</head>
<body>
  <h1>Vue响应式原理-Vue3 new Proxy()</h1>
  <div id="app"></div>
</body>
<script>
  let data = {
  msg: 'hello',
  count: 0
}
// 模拟Vue实例
let vm = new Proxy(data, {
  // 执行代理行为的函数
  // 当访问vm的成员会执行
  get(target, key) {
    console.log('get, key: ', key, target[key])
    return target[key]
  },
  // 当设置vm的成员会执行
  set(target, key, newValue) {
    console.log('set, key: ', key, newValue)
    if(target[key] === newValue) {
      return
    }
    target[key] = newValue
    document.querySelector('#app').textContent = target[key]
  }
})
// 测试
vm.msg = 'HELLO WORLD!'
console.log(vm.msg)
</script>

</html>